/*
 * @Author: mayijun
 * @Date: 2022-05-14 11:12:52
 * @LastEditors: mayijun
 * @LastEditTime: 2022-06-29 15:23:55
 */
//筛选条件树组件
import { computed, defineComponent, onMounted, reactive, ref, toRaw, watch } from 'vue';
import './index.scss';
import { ElButton, ElMessage, ElOption, ElSelect } from 'element-plus';
import draggable from 'vuedraggable';
import DateTag from '@/views/indexApplication/config/components/dateTag/index';
import EnumTag from '@/views/indexApplication/config/components/enumTag/index';
import NumberTag from '@/views/indexApplication/config/components/numberTag/index';
import _ from 'lodash';
import DimensionSelectTag from '../dimensionSelectTag';

const ConditionTree = defineComponent({
  name: 'ConditionTree',
  components: {
    draggable,
    DateTag,
    EnumTag,
    NumberTag
  },
  props: {
    //筛选条件对象
    treeNodeData: {
      type: Object,
      default: () => { }
    },
  },
  emits: ['removeNode', 'addNode'],
  setup: (props, { slots, attrs, emit }) => {

    let state = reactive({
      options: [
        { label: '且', value: 'AND' },
        { label: '或', value: 'OR' }
      ]
    });

    // 删除节点
    const removeNode = (node: any, parentNode: any) => {
      emit('removeNode', node, parentNode);
    }

    // 添加节点
    const addNode = (treeNodeData?: any) => {
      emit('addNode', treeNodeData);
    }

    //拖拽元素添加后处理
    const addNodesData = () => {
      emit('addNode', props.treeNodeData);
    }

    /**
      * 0: {label: "枚举类型", value: "ENUM"}
      * 1: {label: "日期类型", value: "DATE"}
      * 2: {label: "普通类型", value: "GENERAL"}
      * 维度类型
      */
    /**
     * 指标类型
     * 0: {label: "数值", value: "68"}
     * 1: {label: "文本", value: "69"}
     * 2: {label: "日期", value: "70"}
     */

    return () => {
      return (
        <>
          {props.treeNodeData.treeList.length == 0 && !props.treeNodeData.childrenTree && (
            <div class="none-data">
              拖拽左侧元素至画布区域配置逻辑
            </div>
          )}
          <ul class={['tree-node-wrap', props.treeNodeData.level != 0 && props.treeNodeData.treeList.length > 0 ? "tree-child-warp" : ""]}>
            < li
              class={[
                'add-btn logical-wrapper',
                props.treeNodeData && (props.treeNodeData?.childrenTree || props.treeNodeData.treeList.length > 1) ? 'show-minus' : ''
              ]}
            >
              {props.treeNodeData && (props.treeNodeData?.childrenTree || props.treeNodeData.treeList.length > 1) && (
                <div class="condition-select">
                  <ElSelect v-model={props.treeNodeData.opType} style="width: 60px">
                    {state.options.map(item => (
                      <ElOption
                        class="logical-operator-option"
                        key={item.value}
                        label={item.label}
                        value={item.value}
                      ></ElOption>
                    ))}
                  </ElSelect>
                  {props.treeNodeData.level == 0 && (
                    <ElButton type='text' onClick={addNode}>+层级</ElButton>
                  )}
                </div>
              )}
              {props.treeNodeData && (props.treeNodeData?.childrenTree || props.treeNodeData.treeList.length > 1) && (
                <div class="border-level"></div>
              )}
            </li >
            <li class="condition-block">
              {props.treeNodeData && props.treeNodeData.childrenTree && (
                <ConditionTree
                  treeNodeData={props.treeNodeData.childrenTree}
                  onAddNode={addNode}
                  onRemoveNode={removeNode}
                />
              )}
              {props.treeNodeData.treeList.length == 0 && props.treeNodeData.childrenTree && (
                <div class="none-data-child">
                  拖拽左侧元素至画布区域配置逻辑
                </div>
              )}
              {props.treeNodeData && (
                <ul class={["tag-item-wrap", props.treeNodeData.childrenTree ? "tag-min" : ""]}>
                  <draggable
                    class="condition-drag"
                    list={props.treeNodeData.treeList}
                    group="people"
                    item-key="id"
                    ghost-class="drag-ghost"
                    onAdd={(evt: any) => { addNodesData() }}
                    v-slots={{
                      item: (item: any) => {
                        let node = item.element;
                        
                        //判断文本类型
                        if (node.dataTypeId == 69) {
                          node.operator = node.operator || 'in';
                          node.value = node.value || [];
                          if (node.dimensionType) {
                            return (
                              <li class="node-group-item">
                                <DimensionSelectTag
                                  key={node.level}
                                  tagData={node}
                                  parentNode={props.treeNodeData}
                                  onRemoveNode={removeNode}
                                />
                              </li>
                            )
                          }
                          return (
                            <li class="node-group-item">
                              <EnumTag
                                key={node.level}
                                tagData={node}
                                parentNode={props.treeNodeData}
                                onRemoveNode={removeNode}
                              />
                            </li>
                          )
                        }

                        //判断数值类型
                        if (node.dataTypeId == 68) {
                          node.operator = node.operator || '=';
                          node.value = node.value || [0];
                          if (node.dimensionType) {
                            return (
                              <li class="node-group-item">
                                <DimensionSelectTag
                                  key={node.level}
                                  tagData={node}
                                  parentNode={props.treeNodeData}
                                  onRemoveNode={removeNode}
                                />
                              </li>
                            )
                          }
                          return (
                            <li class="node-group-item">
                              <NumberTag
                                key={node.level}
                                tagData={node}
                                parentNode={props.treeNodeData}
                                onRemoveNode={removeNode}
                              />
                            </li>
                          )
                        }
                        //判断日期类型
                        if (node.dataTypeId == 70) {
                          node.value = node.value || "";
                          node.rangeType = node.rangeType || ""; // 默认是固定时间， RELATIVE:相对时间
                          return (
                            <li class="node-group-item">
                              <DateTag
                                key={node.level}
                                tagData={node}
                                parentNode={props.treeNodeData}
                                onRemoveNode={removeNode}
                              />
                            </li>
                          )
                        }

                      }
                    }}>
                  </draggable>
                </ul >
              )}
            </li >
          </ul >
        </>
      )
    }
  }
}

);
export default ConditionTree;
